@extends('layouts.default')

@section('title')
	小区管理
@stop

@section('pre')
	<li class="active"><span>@yield('title')</span></li>
@stop

@section('css')
@stop

@section('content')

<div class="row">
	<div class="col-lg-12">
		<div class="main-box">
			<header class="main-box-header clearfix">
			<h2>创建一个新小区</h2>
			</header>
			<div class="main-box-body clearfix">
				<form class="form-horizontal" role="form">
					<div class="form-group col-lg-12">
						<div class="col-lg-3">
							<input class="form-control" id="newGroupNameInput" type="text" placeholder="请输入一个新小区名">
						</div>
						<button type="button" class="btn btn-primary md-trigger modal-create" id="createNewWinByGroup" data-modal="modal-create" disabled>创建</button>
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="col-lg-12">
		<div class="main-box clearfix">
			<header class="main-box-header clearfix">
			<h2 class="pull-left">当前小区列表</h2>
			<div id="reportrange" class="pull-right daterange-filter">
				<i class="icon-calendar"></i>
				<span></span><b class="caret"></b>
			</div>
			</header>
			<div class="main-box-body clearfix">
				@if( isset($groupList) && !empty($groupList) )
				<div class="table-responsive">
					<table class="table">
					<thead>
					<tr>
						<th>
							<a href="#"><span>小区ID</span></a>
						</th>
						<th>
							<a href="#"><span>小区名</span></a>
						</th>
						<th>
							<a href="#"><span>小区设备数</span></a>
						</th>
						<th>
							<a href="#"><span>描述信息</span></a>
						</th>
						<th class="text-center">
							查看详情
						</th>
					</tr>
					</thead>
					<tbody>
						@foreach( $groupList as $val )
						<tr id="g-list-{{ $val->id }}">
							<td>
								{{ $val->id }}
							</td>
							<td>
								{{ $val->name }}
							</td>
							<td>
								{{ $val->num?$val->num:0 }}
							</td>
							<td>
								{{ $val->about }}
							</td>
							<td class="text-center">
								<button type="button" class="btn btn-primary btn-xs md-trigger group-infos" data-modal="modal-group-info">
								<span class="fa fa-search"></span> 详情
								</button>
							</td>
						</tr>
						@endforeach
					</tbody>
					</table>
				</div>
				<ul class="pagination pull-right">
                    <?php echo $groupList->render(); ?>
                </ul>
                @endif
			</div>
		</div>
	</div>
</div>

<!-- 新建小区 -->
<div class="md-modal md-effect-11" id="modal-create">
    <div class="md-content">
        <div class="modal-header">
            <button class="md-close close">&times;</button>
            <h4 class="modal-title">创建一个新的小区</h4>
        </div>
        <div class="modal-body">
            <form role="form" method="post" action="{{ url('groupCreate') }}">
                <div class="form-group col-lg-12">
                    <label for="group-name">小区名称</label>
                    <div class="input-group col-lg-6">
                        <input type="text" class="form-control modal-data-info" id="group-name" name="name" value="">
                    </div>
                </div>
                <div class="form-group col-lg-12">
					<label for="exampleInputFile">县区</label>
						<div class="form-group-select2">
						<select id="loc_town" name="location" style="width:120px">
						</select>
					</div>
				</div>
                <div class="form-group col-lg-12">
					<label for="group-about">小区描述</label>
					<textarea class="form-control" id="group-about" name="about" rows="3" placeholder="请输入小区描述信息"></textarea>
				</div>
                <div class="form-group" style="text-align: center">
                    <input type="submit" class="btn btn-info btn-xs" id="group-create" name="group-create" value="创建">
                    <button type="button" class="btn btn-danger btn-xs" id="modal-close">
                        取消
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 详情页 -->
<div class="md-modal md-effect-11" id="modal-group-info">
    <div class="md-content">
        <div class="modal-header">
            <button class="md-close close" id="close-group-dev">&times;</button>
            <h4 class="modal-title" id="dev-group-title">小区详情</h4>
        </div>
        <div class="modal-body">
            <div class="main-box-body clearfix">
				<div class="table-responsive">
					<table class="table" id="group-info-tb">
					<thead>
					<tr>
						<th>
							<a href="#"><span>设备ID</span></a>
						</th>
						<th>
							<a href="#"><span>设备名</span></a>
						</th>
						<th>
							<a href="#"><span>地址信息</span></a>
						</th>
					</tr>
					</thead>
					<tbody>
						<!-- <tr> -->
							
						<!-- </tr> -->
					</tbody>
					</table>
				</div>
			</div>
        </div>
    </div>
</div>
@stop

@section('js')

	<script type="text/javascript">
		
		jQuery(document).ready(function() {

			//文本触发事件
			$('#newGroupNameInput').bind('input propertychange', function(){

				if( $.trim($(this).val()) != '' )
				{
					return $('#createNewWinByGroup').removeAttr('disabled');
				}

				return	$('#createNewWinByGroup').attr('disabled', 'disabled');

			});

			$('#createNewWinByGroup').on('click', function(){

				$('#group-name').val($('#newGroupNameInput').val());

			});

			//绑定关闭事件
			closeModal($('#modal-create'), $('#modal-close'));


			//详情查看
			$('.group-infos').on('click', function(){

				//loading
				$('#group-info-tb').find('tbody').html('<div id="show-group-loading" style="position:absolute;left:50%;font-size:16px;margin:10px -20px"><i class="fa-li fa fa-spinner fa-spin"></i>加载中...</div>');

				//title
				$('#dev-group-title').html($.trim($(this).parent().parent().find("td:eq(1)").text()) + '&nbsp;详情');

				var id = $(this).parent().parent().attr('id').replace('g-list-', '');

				var uri = "{{ url('groupInfo') . '/' }}" + id;

				$.post(uri, function(data){
				
					var dbData = '';
					
					if( data != '' )
					{

						$.each(data,function(k,v){

							var addressArr = v.address.split(';');
							
							var address = addressArr[0] + '栋楼' + addressArr[1] + '单元' + addressArr[2] + '室';

						    // <td class="text-center"><button type="button" class="btn btn-danger btn-xs md-trigger group-infos" data-modal="modal-group-info"><span class="fa fa-unlock"></span> 解绑 </button></td>
						    dbData += '<tr id="g-dev-id-'+ v.id +'"><td>' + v.id + '</td><td>' + v.title + '</td><td>' + address + '</td></tr>';

						})

					}
					else
					{
						dbData = '<tr><td></td><td class="text-center">该小区暂无设备</td><td></td></tr>';
					}

					$('#group-info-tb').find('tbody').html(dbData);
					$('#modal-group-info').animate({width: '+500px'}, "slow");


				});

			})

			$('#close-group-dev').on('click', function(){
				$('#modal-group-info').animate({width: '-500px'}, "slow");
			})

			//关闭
			function closeModal($modalObj, $btnObj)
			{
				$btnObj.on('click', function(){

					$modalObj.find('.modal-header > .close').click();

				})
			}

		});

	</script>

@stop